<?php
$this->breadcrumbs = array(
    'Dashboard - Statistic'
);
?>
<div class="row-fluid">
    <div class="box">
        <header>
            <h5>Line Chart</h5>
        </header>
        <div class="body">
            <div class="row-fluid">
                <div class="span6" id="chart_sales" style="min-height: 300px; min-width: 400px"></div>
                <div class="span6" id="chart_completed" style="min-height: 300px; min-width: 400px"></div>
            </div>
            <div class="row-fluid">
                <div class="span6" id="chart_order" style="min-height: 300px;"></div>
                <div class="span6" id="chart_earnings" style="min-height: 300px;"></div>
            </div>
        </div>
    </div>
</div>
<script>


    /*--------------------------------------------------------
     BEGIN DASHBOARD SCRIPTS
     ---------------------------------------------------------*/
    function dashboard() {

        /*----------- BEGIN SPARKLINE CODE -------------------------*/
        /* required jquery.sparkline.min.js*/

        /** This code runs when everything has been loaded on the page */
        /* Inline sparklines take their values from the contents of the tag */
        $('.inlinesparkline').sparkline();

        /* Sparklines can also take their values from the first argument
         passed to the sparkline() function */
        var myvalues = [10, 8, 5, 7, 4, 4, 1];
        $('.dynamicsparkline').sparkline(myvalues);

        /* The second argument gives options such as chart type */
        $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'});

        /* Use 'html' instead of an array of values to pass options
         to a sparkline with data in the tag */
        $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'});


        $(".sparkline.bar_week").sparkline([5, 6, 7, 2, 0, -4, -2, 4], {
            type: 'bar',
            height: '40',
            barWidth: 5,
            barColor: '#4d6189',
            negBarColor: '#a20051'
        });

        $(".sparkline.line_day").sparkline([5, 6, 7, 9, 9, 5, 4, 6, 6, 4, 6, 7], {
            type: 'line',
            height: '40',
            drawNormalOnTop: false
        });

        $(".sparkline.pie_week").sparkline([1, 1, 2], {
            type: 'pie',
            width: '40',
            height: '40'
        });

        $('.sparkline.stacked_month').sparkline(['0:2', '2:4', '4:2', '4:1'], {
            type: 'bar',
            height: '40',
            barWidth: 10,
            barColor: '#4d6189',
            negBarColor: '#a20051'
        });
        /*----------- END SPARKLINE CODE -------------------------*/

    }
    /*--------------------------------------------------------
     END DASHBOARD SCRIPTS
     ---------------------------------------------------------*/

    dashboard();

    google.load("visualization", "1", {packages: ["columnchart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        <?php
/**
 * Total order sales
 */
?>
//create data table object
        var data_sales = new google.visualization.DataTable();
//define columns  
        data_sales.addColumn('string', 'Total');
        data_sales.addColumn('number', 'Orders');

//define rows of data  
        data_sales.addRows([
            ['Month', <?php echo $statistic['sales']['month']; ?>],
            ['Week', <?php echo $statistic['sales']['week']; ?>]
        ]);

        var options_sales = {
            is3D: true,
            title: 'Statistic Sales', titleTextStyle: {color: 'red'}
        };

        var chart_sales = new google.visualization.ColumnChart(document.getElementById('chart_sales'));
        chart_sales.draw(data_sales, options_sales);
    
<?php
/**
 * Total order completed
 */
?>
//create data table object
        var data_completed = new google.visualization.DataTable();
//define columns  
        data_completed.addColumn('string', 'Total');
        data_completed.addColumn('number', 'Orders');

//define rows of data  
        data_completed.addRows([
            ['Month', <?php echo $statistic['completed']['month']; ?>],
            ['Week', <?php echo $statistic['completed']['week']; ?>]
        ]);

        var options_completed = {
            is3D: true,
            title: 'Statistic Orders Completed', titleTextStyle: {color: 'red'}
        };

        var chart_completed = new google.visualization.ColumnChart(document.getElementById('chart_completed'));
        chart_completed.draw(data_completed, options_completed);

}

</script>